import React, { Component } from "react";
import { Card, Table, Modal, Button, Input } from "antd";
import "./service.less";
import LinkButton from "../../../components/link-button";
const tabList = [
  {
    key: "tab1",
    tab: "我创建的服务",
  },
  {
    key: "tab2",
    tab: "我参与的服务",
  },
];
const dataSource = [
  {
    key: "1",
    name: "213",
    version: "1.1",
    type: "逻辑回归",
    data: "windows",
    time: "2019-8-13",
    status: "待测试",
  },
  {
    key: "2",
    name: "152",
    version: "1.1",
    type: "树模型",
    data: "windows",
    time: "2019-9-13",
    status: "待测试",
  },
];

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "版本号",
    dataIndex: "version",
    key: "version",
  },
  {
    title: "计算类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "数据源",
    dataIndex: "data",
    key: "data",
  },
  {
    title: "修改日期",
    dataIndex: "time",
    key: "time",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    render: () => (
      <div>
        <LinkButton>测试</LinkButton>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <LinkButton>发布</LinkButton>
      </div>
    ),
  },
];
const dataSource1 = [
  {
    key: "1",
    name: "213",
    version: "1.1",
    type: "LR",
    data: "测试010",
    time: "2019-12-13",
    status: "待审批",
  },
];

const columns1 = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "版本号",
    dataIndex: "version",
    key: "version",
  },
  {
    title: "计算类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "数据源",
    dataIndex: "data",
    key: "data",
  },
  {
    title: "修改日期",
    dataIndex: "time",
    key: "time",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    render: () => (
      <div>
        <LinkButton>审批</LinkButton>
      </div>
    ),
  },
];
const contentList = {
  tab1: (
    <p>
      <Table dataSource={dataSource} columns={columns} />
    </p>
  ),
  tab2: (
    <p>
      <Table dataSource={dataSource1} columns={columns1} />
    </p>
  ),
};
class service extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: "tab1",
      visible: false,
    };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
  };
  render() {
    return (
      <div className="service">
        <Card
          style={{ width: "100%" }}
          tabList={tabList}
          extra={
            <Button type="primary" onClick={this.showModal}>
              创建服务
            </Button>
          }
          activeTabKey={this.state.key}
          onTabChange={(key) => {
            this.onTabChange(key, "key");
          }}
        >
          {contentList[this.state.key]}
        </Card>

        <Modal
          title="新建服务"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          className="addzican-modal"
        >
          <div>基本信息配置</div>
          <div style={{ marginTop: 10 }}>
            <span>服务名称：</span>
            <Input style={{ width: 300 }} />
          </div>
          <div style={{ marginTop: 10 }}>
            <span>服务描述：</span>
            <Input style={{ width: 300 }} />
          </div>
          <div>
            <span>配置入参：</span>
            <div style={{ display: "inline-block" }}>
              <div
                style={{
                  width: 600,
                  marginTop: 20,
                }}
              >
                <div>
                  <span style={{ marginLeft: 10 }}>参数名</span>
                  <span style={{ marginLeft: 174 }}>数据类型</span>
                  <span style={{ marginLeft: 60 }}>参数说明</span>
                  <span style={{ marginLeft: 160 }}>操作</span>
                </div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-around",
                  }}
                >
                  <Input style={{ width: 200 }} />
                  <Input style={{ width: 100 }} />
                  <Input style={{ width: 200 }} />
                  <LinkButton>新建</LinkButton>
                </div>
              </div>
            </div>
          </div>
          <div>
            <span>配置出参：</span>
            <div style={{ display: "inline-block" }}>
              <div
                style={{
                  width: 600,
                  marginTop: 20,
                }}
              >
                <div>
                  <span style={{ marginLeft: 10 }}>参数名</span>
                  <span style={{ marginLeft: 174 }}>数据类型</span>
                  <span style={{ marginLeft: 60 }}>参数说明</span>
                  <span style={{ marginLeft: 160 }}>操作</span>
                </div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-around",
                  }}
                >
                  <Input style={{ width: 200 }} />
                  <Input style={{ width: 100 }} />
                  <Input style={{ width: 200 }} />
                  <LinkButton>新建</LinkButton>
                </div>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 20 }}>
            <span>服务器配置详情</span>
          </div>
          <div style={{ marginTop: 20 }}>
            <span>版本号：</span>
            <span>1.0</span>
          </div>
          <div style={{ marginTop: 20 }}>
            <span>服务号：</span>
            <span>256894651230</span>
          </div>
          <div style={{ marginTop: 20 }}>
            <span>模型服务器：</span>
            <span>26498</span>
          </div>
          <div style={{ marginTop: 20 }}>
            <span>服务描述：</span>
            <span>2984561</span>
          </div>
          <div style={{ marginTop: 20 }}>
            <span>模型是否加密：</span>
            <span>是</span>
          </div>
          <div style={{ marginTop: 20 }}>
            <span>结果是否加密：</span>
            <span>是</span>
          </div>
        </Modal>
      </div>
    );
  }
}

export default service;
